<template>
  <div class="knowledge-page">
    <section>
      <ul class="knowledge-list">
        <li v-for="(val, key, index) in knowledge" :key="index">
          <label>{{key}}</label><div class="flex-item">{{val}}</div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'knowledge',
    data () {
      return {
        knowledge: {
          align: '排列',
          center: '居中',
          body: '身体',
          herf: '超文本引用',
          target: '目标',
          URL: '统一资源定位符',
          decoration: '装饰',
          hover: '悬浮',
          none: '没有的',
          border: '边框',
          radius: '半径',
          dashed: '虚线',
          solid: '实心的',
          padding: '内边距',
          margin: '外边距',
          display: '显示',
          block: '块',
          icon: '图标',
          position: '位置',
          absolute: '绝对的',
          relative: '相对的',
          section: '内容',
          footer: '页脚',
          aside: '在旁边',
          banner: '横幅',
          repeat: '重复',
          size: '尺寸',
          background: '背景',
          list: '列表',
          tag: '标签'
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .knowledge-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://kidtts.tmooc.cn/script/css/rep/img/main_bg.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    padding: 16px;
    section {
      display: block;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      overflow: auto;
      overflow-scrolling: touch;
      -webkit-overflow-scrolling: touch;
    }
    .knowledge-list {
      li {
        display: flex;
        padding: 16px;
        position: relative;
        &:not(:first-child):before {
          content: '';
          position: absolute;
          top: 0;
          left: 16px;
          right: 0;
          border-top: 1px solid #eee;
          transform: scaleY(.5);
        }
        div {
          flex: 1;
        }
        label {
          width: 100px;
        }
      }
    }
  }
</style>
